<template>
  <div>
    <page-banner v-if="showBanner && bannerPosition==='top'" ref="pageBanner" :banner-setting="bannerSetting" />
    <div
      class="flex-container"
      :class="[{
        'tree-fold':treeFold
      }]"
    >
      <div class="left-container">
        <custom-tree
          v-loading="treeLoading"
          :loaded="!treeLoading"
          :tree-info="treeInfo"
          :data="treeData"
          :btns="treeBtns"
          :stick-disabled="false"
          show-fold
          v-model:tree-fold="treeFold"
          @node-click="handleNodeClick"
          @node-select="handleNodeClick"
        />
      </div>
      <div class="right-container">
        <sticky :sticky-top="90" :z-index="100" class-name="btn-sticky" style="margin-bottom:10px">
          <table-operate is-in-template :btns="toolbarBtns" :get-dialog-form="getFormInfo" :show-back="showBack">
            <template v-if="showBack" #back="{size}">
              <span class="btn-wraper">
                <el-button type="primary" :size="size" @click="goBack">
            <el-icon><Back /></el-icon>
            返回
          </el-button>
              </span>
            </template>
          </table-operate>
        </sticky>
        <table-filter
          ref="tableFilter"
          is-in-template
          :query="filter"
          :query-rows="queryRows"
          @search="handleSearch"
          @reset="handleSearch"
        />
        <div :id="containerId">
          <slot v-if="$slots.default" />
          <async-component v-else v-bind="previewData" />
        </div>
      </div>
    </div>
    <page-banner v-if="showBanner && bannerPosition==='bottom'" ref="pageBanner" :banner-setting="bannerSetting" />
  </div>
</template>

<script>
import main from './mixins/main'
import tree from './mixins/tree'
import filter from './mixins/filter'
import banner from './mixins/banner'
import AsyncComponent from '@admin/packages/async-component/src/main.vue'
import Sticky from '@admin/components/sticky/index'
import { usePageStore } from '@/admin/store/modele/page'
export default {
  name: 'Tem1110',
  components: {
    AsyncComponent,
    Sticky
  },
  mixins: [main, tree, filter, banner],
  data() {
    return {
      loaded: true,
      previewData: {
        js: '',
        template: '',
        css: ''
      },
      treeFold: false,
      pageStore: null
    }
  },
  computed: {
    containerId: function() {
      return 'code-' + this.code
    }
  },
  mounted: function() {
    // 初始化store
    this.pageStore = usePageStore()
    
    this.getTreeData().then(() => {
      this.loadRight()
    })
  },
  methods: {
    handleSearch() {
      console.log('search')
    },
    loadRight() {
      const scriptName = `Script${this.code}`
      console.log(scriptName)
      if (window[scriptName]) {
        console.log(window[scriptName])
        this.previewData.js = window[scriptName].js
        this.previewData.template = window[scriptName].template
        this.previewData.css = window[scriptName].css
      }
    },
    handleNodeClick(data, node) {
      console.log(data, node)
      this.pageStore.setCurrentTree(data)
      this.currentTree = data
      this.emitNodeclick({ data, node, leaf: true })
    }
  }
}
</script>

<style lang="scss" scoped>
.flex-container{
  display: flex;
  &.tree-fold{
    .left-container{
      width: 0 !important;
    }
  }
  .left-container{
    position: relative;
    width: 300px;
    height: 100%;
    .left-side-icon{
      right: -13px;
      z-index: 100;
      font-size: 18px;
      background-color: #a8abb2;
      color: #fff;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      cursor: pointer;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .right-container{
    flex: 1;
    margin-left: 20px;
    position: relative;
    min-width: 0;
    ::v-deep .btn-sticky{
      background: #fff;
      box-sizing: content-box;
      &.is-sticky{
        padding: 6px 0;
        transform: translateY(-6px);
      }
    }
  }
}
</style>
